//交织动画

import 'package:flutter/material.dart';

class StaggerAnimation extends StatelessWidget{

  StaggerAnimation({Key? key,required this.controller}) :super(key: key){
    //高度动画
    height = Tween<double>(
      begin: .0,
      end: 300.0,
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: const Interval(
          0.0, 0.6, //间隔，前60%的动画时间
          curve: Curves.ease,
        ),
      ),
    );

    color = ColorTween(
      begin: Colors.green,
      end: Colors.red,
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: const Interval(
          0.0, 0.6, //间隔，前60%的动画时间
          curve: Curves.ease,
        ),
      ),
    );

    padding = Tween<EdgeInsets>(
      begin: const EdgeInsets.only(left: .0),
      end: const EdgeInsets.only(left: 100.0),
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: const Interval(
          0.6, 1.0, //间隔，后40%的动画时间
          curve: Curves.ease,
        ),
      ),
    );

  }

  late final Animation<double> controller;
  late final Animation<double> height;
  late final Animation<EdgeInsets> padding;
  late final Animation<Color?> color;



  @override
  Widget build(BuildContext context) {

      return  AnimatedBuilder(
        builder: _buildAnimation,
        animation: controller,
      );

  }
  Widget _buildAnimation(BuildContext context, child) {
    return Container(
      alignment: Alignment.bottomCenter,
      padding: padding.value,
      child: Container(
        color: color.value,
        width: 50.0,
        height: height.value,
      ),
    );
  }
}

class StaggerRoute  extends StatefulWidget {

  @override
  State<StatefulWidget> createState() => _StaggerRouteState();

}

class _StaggerRouteState  extends State with TickerProviderStateMixin{

  late AnimationController _controller;
   //记录动画是否在执行中(在执行中应该让其执行完毕)
   bool animationIsRun =false;

   @override
  void initState() {
      super.initState();
     _controller = AnimationController(duration :const Duration(milliseconds: 2000),vsync: this);
     _controller.addStatusListener((status) {
             switch(status){
               case AnimationStatus.dismissed:
                 animationIsRun=false;
                 break;
               case AnimationStatus.forward:
               case AnimationStatus.reverse:
               case AnimationStatus.completed:
                 animationIsRun = true;
                 break;
             }
       });


  }

  void _playAnimation() async{

     await _controller.forward().orCancel;
     await _controller.reverse().orCancel;

  }

  @override
  Widget build(BuildContext context) {

    return Center(
        child: Column(
        children: [
          Directionality(
          textDirection: TextDirection.ltr,
          child: ElevatedButton(
              style: ButtonStyle(padding: MaterialStateProperty.all(const EdgeInsets.all(100))),
           onPressed: () {
                if(!animationIsRun) {
                  _playAnimation();
                }
           },
         child: const Text("start animation",textDirection: TextDirection.ltr,),
     )
      ),
    Container(
    width: 300.0,
    height: 300.0,
    decoration: BoxDecoration(
    color: Colors.black.withOpacity(0.1),
    border: Border.all(
    color: Colors.black.withOpacity(0.5),
    ),
    ),
    //调用我们定义的交错动画Widget
    child: StaggerAnimation(controller: _controller),
    ),
    ],
   )
    );
  }
}
